
<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="dialogFormVisible = true"
      >添加用户</el-button
    >
    <!-- 获取用户信息并渲染页面 -->
    <el-table :data="userlist" style="width: 100%">
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="role_name" label="昵称"> </el-table-column>
      <el-table-column prop="mobile" label="手机号码"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="mg_state" label="状态">
        <!-- 插槽内容来访问子组件中的值 -->
        <template slot-scope="scope">
          <el-switch
            @change="changeSteat(scope.row)"
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <!-- 操作修改，删除，分配角色 -->
      <el-table-column label="操作">
        <!-- 修改 -->
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="Editstate(scope.row)"
          ></el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="Formstate(scope.row)"
          ></el-button>
          <!-- 分配用户角色 -->
          <el-button
            type="warning"
            icon="el-icon-star-off"
            circle
            size="mini"
            
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 4, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加用户的弹出框 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="postUsers">
        <el-form-item label="用户名">
          <el-input v-model="postUsers.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="postUsers.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="postUsers.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="postUsers.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addsusers">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户信息的 -->
    <el-dialog title="修改用户" :visible.sync="dialogFormEideVisible">
      <el-form :model="steatEide">
        <el-form-item label="用户名">
          <el-input v-model="steatEide.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="steatEide.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="steatEide.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEideVisible = false">取 消</el-button>
        <el-button type="primary" @click="putsusers">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userlist: [], //接收的服务器的users数据
      total: 0, //接收的服务器users数据的条数
      pageSize: 4, //设置默认展示的条数
      //添加用户
      dialogFormVisible: false,
      postUsers: {
        username: "",
        password: "",
        mobile: "",
        email: "",
      },
      // 修改
      dialogFormEideVisible: false,
      steatEide: {},
    };
  },

  methods: {
    // 删除用户
    Formstate(userinfo) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let { data } = await this.$qiuzi.delete("/users/" + userinfo.id);
        if (data.meta.status == 200) {
          this.$message({
            type: "success",
            message: data.meta.msg,
          });
          //删除完了之后刷新页面在第几页展示
          this.anduser(1, this.pageSize);
        } else {
          this.$message.error(data.meta.msg);
        }
      });
    },

    // 修改用户信息
    async putsusers() {
      let { data } = await this.$qiuzi.put(
        "/users/" + this.steatEide.id,
        this.steatEide
      );
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.dialogFormEideVisible = false;
      } else {
        this.$message.error(data.meta.msg);
      }
    },

    // 修改用户获取改用户的数据
    Editstate(userinfo) {
      this.dialogFormEideVisible = true;
      this.steatEide = userinfo;
    },

    //添加用户
    async addsusers() {
      let { data } = await this.$qiuzi.post("/users", this.postUsers);
      console.log(data);
      if (data.meta.status == 201) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.anduser(1, this.pageSize);
        this.dialogFormVisible = false;
      } else {
        this.$message.error(data.meta.msg);
      }
    },

    //改变用户状态,需要向后端传入,改不了，因为没有权限
    async changeSteat(rows) {
      let { data } = await this.$qiuzi.put(
        `/users/${rows.id}/state/${rows.mg_state}`
      );
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
      } else {
        //如果服务器改变用户状态失败，在前端页面的状态就取反
        rows.mg_state == !rows.mg_state;
        this.$message.error(data.meta.msg);
      }
    },

    //公用的每页页数和条数，获取的数据
    async anduser(pagenum, pagesize) {
      let { data } = await this.$qiuzi.get(
        `/users?pagenum=${pagenum}&pagesize=${pagesize}`
      );
      console.log(data);
      if (data.meta.status == 200) {
        this.userlist = data.data.users;
        this.total = data.data.total;
      } else {
        this.$message.error(data.meta.msg);
      }
    },

    //设置每页展示的页数
    async handleCurrentChange(pagenum) {
      this.anduser(pagenum, this.pageSize);
    },

    //设置每页展示的条数
    async handleSizeChange(pagesize) {
      this.anduser(1, pagesize);
    },
  },

  //设置页面加载(跳转)就获取到数据，每页的页数和条数
  async mounted() {
    this.anduser(1, this.pageSize);
  },
};
</script>

<style>
</style>